<template>
    <el-drawer
        size="300"
        :show-close="false"
        :modal="false"
        :visible.sync="drawer">
        <div style="padding: 10px" :key="key">
            <el-button type="primary" plain size="mini" @click="uploadImage">更换图片</el-button>
            <input ref="upload" style="display: none" type="file" @change="changeImage" class="upload" accept=".jpeg,.jpg,.png">
        </div>
    </el-drawer>
</template>

<script>
/* const { dialog } = require('electron').remote
const { nativeImage } = require('electron') */

export default {
  data: function () {
    return {
      key: 1,
      drawer: false
    }
  },
  methods: {
    uploadImage () {
      this.$refs.upload.click()
    },
    changeImage () {
      const file = this.$refs.upload.files[0]
      const reader = new FileReader()
      reader.addEventListener('load', () => {
        // convert image file to base64 string
        console.log(reader.result)
        this.detail.src = reader.result
      }, false)
      if (file) {
        reader.readAsDataURL(file)
      }
    }
    /* changeImage () {
      var options = {
        title: '图片',
        properties: ['openFile'],
        filters: [
          { name: 'Images', extensions: ['jpg', 'jpeg', 'png'] }
        ]
      }
      dialog.showOpenDialog(options).then(result => {
        if (!result.canceled) {
          console.log(result)
          console.log(result.filePaths)
          var logo = nativeImage.createFromPath(result.filePaths[0])
          console.log(logo.getSize())
          console.log(window.screen.availHeight)
          console.log(logo.toDataURL())
          this.detail.src = logo.toDataURL()
        }
      }).catch(err => {
        console.log(err)
      })
    } */
  },
  computed: {
    detail () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
</style>
